<template>
  <scroll-view :style="{'height': '100vh'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll">
    <div class="data-list">
        <ul> 
          <li @click="bindViewTap(item)"  v-for="item in dataList" v-bind:key="item">
            <div class="logo">
            <img v-bind:src="'http://112.74.47.88:8090/report-res/' + item.cover" alt="">
            </div>
            <div class="data-list-title">
              <div>{{item.name}}</div>
              <p>{{item.createTime}}
                <!-- <img v-if="collectActive && index === collectId" v-bind:src="'../../../static/images/collect.png'" @click="clickCollect(item, index, $event)" alt="">
                <img v-if="!collectActive && index === collectId" v-bind:src="'../../../static/images/cancel.png'" @click="clickCollect(item, index)" alt=""> -->
              </p>
            </div>
            <div class="data-list-right">
              <div>
                <img src="../../../static/images/see.png" alt=""> 
                 <div>{{item.looktimes}}</div>               
              </div>
              <!-- <p><img src="../../../static/images/ellipsis.png" alt="" @click.stop='showModalTab($event)'></p> -->
            </div>
          </li>
        </ul>
    </div>
    <div v-if="isActive" class="collection-none">您还没有收藏</div>
  </scroll-view>
</template>
<script>
import card from '@/components/card'
import { formatTime, showLoad } from '@/utils/index'
// import { get } from '@/utils/http'
import storage from '@/utils/storage'
import s from '@/utils/s'
export default {
  onload () {
    wx.showShareMenu({
      withShareTicket: true
    })
    // 调用应用实例的方法获取全局数据
    this.getReportList(1)
    this.getReportIndustryList()
  },
  data () {
    return {
      total: 0,
      dataList: [],
      userInfo: {},
      page: 1,
      isActive: true
    }
  },

  components: {
    card
  },
  methods: {
    bindViewTap (item) {
      const url = '/pages/detail/main'
      wx.navigateTo({ url })
      console.log(url)
    },
    scroll () {
    },
    // 滚动加载数据
    scrolltolower () {
      this.page = this.page + 1
      console.log('数据可视化')
      this.getReportList(this.page)
    },
    scrollLeftList (item) {
      console.log(this.selectClassB.length)
    },
    // 获取报告列表
    getReportList (i) {
      const $this = this
      let page = i
      // 数据加载动画
      showLoad('加载中')
      wx.request({
        url: s.prefixHttp + `report-service/api/report/download/list?page=${page}&pageSize=${10}`,
        method: 'GET',
        header: {'token': storage.get('token')},
        success: function (res) {
          wx.hideLoading()
          const data = res.data.data
          $this.isActive = false
          if (!data.download) {
            showLoad('没有更多数据了')
            return
          }
          for (let i = 0; i < data.download.length; i++) {
            data.download[i].createTime = formatTime(new Date(data.download[i].createTime))
            $this.dataList.push(data.download[i])
          }
          $this.total = data.total
        },
        fail: function (res) {

        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },
  onShareAppMessage (res) {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
    this.getReportList(1)
  }
}
</script>
<style>
.data-list {
  margin: 0 15px;
}
.data-list ul li {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eaeaea;
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 1px 1px #ccc;
}
.data-list ul li:nth-child(2n) {
  border-right: 5px solid #f5d461;

}
.data-list ul li:nth-child(2n+1) {
  border-right: 5px solid #84e6e7;

}
.data-list ul li .data-list-title {
  padding-left: 10px;
  width: 100%;
}
.data-list ul li .data-list-title div {
  overflow: hidden;
  height: 20px;
  text-overflow:ellipsis;
} 
.data-list ul li .data-list-righ {
  
}
.data-list ul li .data-list-right  div{
    color: #fd6e3b;
    text-align: center;
}
.data-list ul li .data-list-right  div img {
  width: 15px;
  height: 10px;
}
.data-list ul li .data-list-right p img{
  width: 42px;
  height: 22px;
  margin-top: 3px;
  margin-left: 3px;
}
.data-list ul li .data-list-title div {
  font-size: 16px;
}
.data-list ul li .data-list-title p {
   color: #9f9f9f;
   font-size: 14px;
   margin-top: 25px;
}
.data-list ul li .logo {
  width: 80px;
  height: 65px;
}
.data-list ul li .logo img {
  width: 100%;
  height: 100%;
}
.collection-none {
  display: flex;
  justify-content: center;
  color: #9f9f9f;
}

</style>
